<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box" abc="this is abc" title="这是title">
        <span>1</span>
        hello
        <!-- 这是注释1 -->
        <span>2</span>
    </div>
</body>
<script>
    var obox = document.querySelector(".box")

    // 获取所有子节点
    console.log(obox.childNodes);

    // 获取当前元素的所有属性节点
    console.log(obox.attributes);
    
    // 只想获取文本节点
    // 只想获取注释节点
    
    // 如何判断不同的节点
    
    // 节点属性
    // 文本
    console.log(obox.childNodes[2]);
    console.log(obox.childNodes[2].nodeType);
    console.log(obox.childNodes[2].nodeName);
    console.log(obox.childNodes[2].nodeValue);
    // 注释
    console.log(obox.childNodes[3]);
    console.log(obox.childNodes[3].nodeType);
    console.log(obox.childNodes[3].nodeName);
    console.log(obox.childNodes[3].nodeValue);
    // 元素
    console.log(obox.childNodes[5]);
    console.log(obox.childNodes[5].nodeType);
    console.log(obox.childNodes[5].nodeName);
    console.log(obox.childNodes[5].nodeValue);
    // 属性
    console.log(obox.attributes[0]);
    console.log(obox.attributes[0].nodeType);
    console.log(obox.attributes[0].nodeName);
    console.log(obox.attributes[0].nodeValue);
    // 根
    console.log(document)
    console.log(document.nodeType)
    console.log(document.nodeName)
    console.log(document.nodeValue)

    // 节点的过滤
    for(var i=0;i<obox.childNodes.length;i++){
        if(obox.childNodes[i].nodeType === 8){
            console.log(obox.childNodes[i].nodeValue)
        }
    }

</script>
</html>